<template>
 <div>
    <h2 v-if="title">{{title}}</h2>
    <div id="barStack" :style="{height: height, width: width}"></div>
 </div>
</template>

<script>
import macarons from '@/assets/theme/macarons'
import { inject, onMounted, reactive, onUnmounted } from 'vue'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '4.375rem'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    let $echarts = inject('echarts')
    let $http = inject('axios')

    let data = reactive({})

    async function getState() {
      data = await $http({url: "/four/data"})
    }

    onMounted(() => {
      let myChart = $echarts.init(document.getElementById('barStack'), macarons)

      getState().then(() => {

        let chartD = data.data.data.chartData;

        myChart.setOption({
          textStyle: {
            color: '#fff'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: "2%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: chartD.day,
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          series: [
            {
              name: "服饰",
              type: 'bar',
              data: chartD.num.clothes,
              label: {
                show: true
              },
              smooth: true, // 是否平滑曲线显示
              showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
              stack: "Total", // 数据堆叠
              areaStyle: { // 设置填充区域的样式
                opacity: .8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
              },
              lineStyle: { // 设置线段样式
                width: 0
              },
              emphasis: { // 设置高亮的图形样式和标签样式
                focus: "series" // 只显示选中的内容高亮
              }
            },
            {
              name: "数码",
              type: 'bar',
              data: chartD.num.digit,
              label: {
                show: true
              },
              smooth: true,
              showSymbol: false,
              stack: "Total",
              areaStyle: {
                opacity: .8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(55, 162, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(116, 21, 219)'
                  }
                ])
              },
              lineStyle: { // 设置线段样式
                width: 0
              },
              emphasis: { // 设置高亮的图形样式和标签样式
                focus: "series" // 只显示选中的内容高亮
              }
            },
            {
              name: "家电",
              type: 'bar',
              data: chartD.num.electrical,
              label: {
                show: true
              },
              smooth: true,
              showSymbol: false,
              stack: "Total",
              areaStyle: {
                opacity: .8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(55, 162, 255)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(116, 21, 219)'
                  }
                ])
              },
              lineStyle: { // 设置线段样式
                width: 0
              },
              emphasis: { // 设置高亮的图形样式和标签样式
                focus: "series" // 只显示选中的内容高亮
              }
            },
            {
              name: "家居",
              type: 'bar',
              data: chartD.num.gear,
              label: {
                show: true
              },
              smooth: true,
              showSymbol: false,
              stack: "Total",
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 0, 135)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(135, 0, 157)'
                  }
                ])
              },
              lineStyle: { 
                width: 0
              },
              emphasis: {
                focus: 'series'
              },
            },
            {
              name: "日化",
              type: 'bar',
              data: chartD.num.chemicals,
              label: {
                show: true
              },
              smooth: true,
              showSymbol: false,
              stack: "Total",
              areaStyle: {
                opacity: 0.8,
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 191, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(224, 62, 76)'
                  }
                ])
              },
              lineStyle: { 
                width: 0
              },
              emphasis: {
                focus: 'series'
              },
            }
          ]
        })
      })
    
      window.addEventListener("resize", (() => {
        myChart.resize();
      }))
    })

    onUnmounted(() => {
      window.removeEventListener("resize")
    })

   return {
     
   }
  }
}
</script>

<style scoped>
</style>